<template>
  <el-popover
    placement="bottom-end"
    width="300"
    trigger="click"
    :append-to-body="false"
  >
    <div class="ad-title">高级筛选</div>
    <el-form :model="form" label-position="top">
      <Title title="工单记录" />
      <el-form-item label="工单类型">
        <el-select
          v-model="form.modelId"
          multiple
          filterable
          clearable
          size="mini"
        >
          <el-option
            v-for="item in busCategory"
            :key="item.id"
            :value="item.id"
            :label="item.modelName"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <Title title="通话记录" />
      <el-form-item label="呼叫类型">
        <el-select
          v-model="form.callType"
          multiple
          filterable
          clearable
          size="mini"
        >
          <el-option
            v-for="item in stateOptions"
            :key="item._id"
            :value="item._id"
            :label="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="呼叫状态">
        <el-select
          v-model="form.callStatus"
          multiple
          filterable
          clearable
          size="mini"
        >
          <el-option
            v-for="item in callStatusOption"
            :key="item._id"
            :value="item._id"
            :label="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <Title title="会话记录" />
      <el-form-item label="渠道接入号">
        <el-select
          v-model="form.accessId"
          multiple
          filterable
          clearable
          size="mini"
        >
          <el-option
            v-for="item in accessIdOpt"
            :key="item.accessId"
            :value="item.accessId"
            :label="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div style="text-align: right; margin: 0">
      <el-button @click="reset" size="mini">重置</el-button>
      <el-button type="primary" @click="search" size="mini">查询</el-button>
    </div>
    <div slot="reference" class="search-icon">
      <i class="V7_iconfont V7_iconV7tubiao_shaixuan"></i>
    </div>
  </el-popover>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import Title from '../../newCustomer/common/title.vue'
import { CommonModule } from '@/store/modules/common'
@Component({
  name: 'DySearch',
  components: {
    Title
  }
})
export default class CustomerForm extends Vue {
  @Prop() private stateOptions
  @Prop() private busCategory
  private form: any = {
    callType: [], // 呼叫类型
    modelId: [], // 工单类型
    callStatus: [], // 呼叫状态
    accessId: [] // 渠道接入号
  }

  private callStatusOption: any = [
    {
      name: 'IVR',
      _id: 'IVR'
    },
    {
      name: '排队放弃',
      _id: 'QUEUE_ABANDON'
    },
    {
      name: '已接听',
      _id: 'ANSWER'
    },
    {
      name: '座席未接听',
      _id: 'AGENT_NO_ANSWER'
    },
    {
      name: '并发限制',
      _id: 'CALL_LIMITE'
    },
    {
      name: '黑名单',
      _id: 'BLACK_LIST'
    },
    {
      name: '客户未接听',
      _id: 'CUSTOMER_NO_ANSWER'
    },
    {
      name: '呼叫转移',
      _id: 'CALL_TRANSFER'
    },
    {
      name: '呼叫咨询',
      _id: 'CALL_CONSULT'
    },
    {
      name: '咨询转移',
      _id: 'CALL_CONSULT_TRANSFER'
    },
    {
      name: '三方',
      _id: 'CALL_THREEWAY'
    },
    {
      name: '留言',
      _id: 'VOICEMAIL'
    },
    {
      name: '风控拦截',
      _id: 'RISK'
    }
  ]

  get accessIdOpt () {
    return (CommonModule as any).publicCache.channelList || []
  }

  private reset () {
    this.form = {
      callType: [],
      modelId: [],
      callStatus: [],
      accessId: []
    }
    this.$emit('searchDy', this.form)
  }

  public clearDynamicSearch () {
    this.form = {
      callType: [],
      modelId: [],
      callStatus: [],
      accessId: []
    }
  }

  private search () {
    this.$emit('searchDy', this.form)
  }
}
</script>

<style lang="stylus" scoped>
>>> .title
  margin-bottom 12px
>>> .el-form-item
  margin-bottom 12px
.el-select
  width 100%
  >>> .el-input__inner
    min-height 32px !important
>>> .el-popper
  height 500px !important
  overflow auto !important
.ad-title
  border-bottom 1px solid #E7E9ED
  font-size 14px
  font-weight 600
  padding-bottom 12px
  margin-bottom 10px
.search-icon
  width 32px
  height 32px
  border-radius 4px
  margin-left 10px
  text-align center
  border 1px solid #E7E9ED
  border-radius 4px
  cursor pointer
  padding 8px
  &:hover
    border 1px solid #008BEE
  i
    color #A6A6AE
    &:hover
      color #008BEE
</style>
